<template>
    <div class="main">
        <van-nav-bar title="编辑收货地址" left-text="返回" left-arrow @click-left="onClickLeft" />
            <!-- <van-address-edit
            show-set-default
            show-search-result
            :area-list="areaList"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            :area-placeholder="formData.address?formData.address:'选择省 / 市 / 区'"
            save-button-text="提交"
            @save="onSave"
            @change-area="onchangeArea"
            @change-detail="onChangeDetail"
            @change-default="onchangeDefault"
            :address-info="{
                name: formData.contactor_name,
                tel: formData.phone,
                addressDetail: formData.street,
            }"
            /> -->
            <van-list>
                <van-field v-model="formData.contactor_name" placeholder="收货人姓名">
                    <template #label>
                            <span style="position: absolute;left:40px">联系人</span>
                    </template>
                </van-field>
                <van-field v-model="formData.phone" placeholder="收货人手机号码">
                    <template #label>
                            <span style="position: absolute;left:40px">手机号码</span>
                    </template>
                </van-field>
                <van-field v-model="formData.address"  placeholder="选择地址" readonly @click="show = true">
                    <template #label>
                            <span style="position: absolute;left:40px">地址</span>
                    </template>
                </van-field>
                <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
                    <van-area title="标题" :area-list="areaList"  @confirm="handleConfirm" @cancel="handleCancel"/>
                </van-popup>
                <van-field v-model="formData.street"  placeholder="街道门牌、楼层房间号等信息">
                    <template #label>
                            <span style="position: absolute;left:40px">街道</span>
                    </template>
                </van-field>
            </van-list>
            <van-cell center title="设为默认" style="margin:10px 0;">
                <template #right-icon>
                    <van-switch v-model="checked" size="24" @click="onchangeDefault"/>
                </template>
            </van-cell>
            <van-button type="primary" @click="onSave()" block size="middle" style="width: 92%;margin:40px auto;" color="#fa436a">提交</van-button>
    </div>
</template>
<script>
import {editAddress,getArea} from "@/api/address"
import { areaList } from '@vant/area-data';
export default {
   data() {
      return {
        formData:{
            address: "",
            address_id: 0,
            contactor_name: "",
            is_default: 0,
            phone: "",
            street: ""
        },
        areaList,
        show:false,
        checked:false,
      }
   },
   created(){
        this.formData = this.$route.query;
        if(this.formData.is_default == '1') this.checked = true;
        // getArea().then(res=>console.log(res.data.data))
   },
   computed:{
   },
   methods:{
    onClickLeft(){
        this.$router.go(-1)
    },
    onSave() {
        if(this.$route.query.type){
            this.formData.is_default = 0;
            editAddress(this.formData).then(res=>{
                this.$toast(res.data.msg);
                if(res.data.code == 1){
                    this.$toast("地址添加成功");
                    this.$router.go(-1);
                }
            })
        }else{
            editAddress(this.formData).then(res=>{
                this.$toast(res.data.msg);
                if(res.data.code == 1){
                    this.$toast("地址修改成功");
                    this.$router.go(-1);
                }
            })
        }

    },
    
    onchangeDefault(){
        if(this.checked){
            this.formData.is_default = '0'
        }else{
            this.formData.is_default = '1'
        }
    },
    
    handleConfirm(ev){
        let arr = ["中国"];
        this.formData.address_id = ev[2].code;
        ev.forEach(item=>{
            arr.push(item.name);
        })
        this.formData.address = arr.join(",");
        this.show = false;
    },
    handleCancel(){
        this.show = false;
    }
   },
}
</script>
<style scoped>
    .main{
        background-color: #f5f5f5;
    }
</style>
